<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props进行组件间的数据传递工作</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <input type="text" v-model="name"/>
        <input type="text" v-model="age"/>
        <main-componet name = "张三" age="18"></main-componet>
        <main-componet :name = "name" :age="age"></main-componet>
    </div>
</body>
</html>
<script type="module">
    import {} from './js/2.7.14_dist_vue.js'; 
    

    //展示组件
    let mainComponet = {
        template:"<div><h1>欢迎:{{name}} 年龄:{{age}} 进入直播间</h1></div>",
        props:["name","age"],//props作用 用来接收使用组件时通过组件标签传递的数据
    };
    

    new Vue({
        el:"#app",
        //数据
        data:{
            msg:"你好",
            name:"李四",
            age:22,
        },
        components:{
            mainComponet,
        },
    });
</script>